﻿<link href="/screens/billing/billing.css" rel="stylesheet" media="screen"/>
<link href="/screens/billing/billing.css" rel="stylesheet" media="print" />

<div class="row" style="min-width:1000px;">
    <div class="col-md-5" style="margin:5px 0 0 0;">
        <div class="form-inline">
            <div class="form-group">
                <label class="control-label" for="productTbx">Producto:</label>
                <input type="text" id="productTbx" name="product" class="form-control" style="width:125px;" placeholder="Producto" autofocus />
            </div>
            <div class="form-group" style="margin: 0 0 0 5px;">
                <label class="control-label" for="productCountTxb">Cantidad:</label>
                <input type="number" name="productCount" class="form-control" style="width:50px;padding-right:0;" placeholder="####" />
            </div>
            <button id="addProductBtn" class="btn btn-primary" style="margin-left:5px;font-weight:bold;">Agregar</button>
        </div>
        <div id="billingItems" class="col-md-12" style="margin:20px 0 0 0;height:525px;overflow-y:auto;"></div>
    </div>
    <div class="col-md-7">
        <div id="customerPayContainer" class="col-md-5 form-horizontal" style="margin:0 0 0 10px;">
            <div class="form-group">
                <label class="control-label" for="customerTbx" style="font-size:20px">Cliente:</label>
                <input type="text" id="customerTbx" name="customer" class="form-control" style="width:230px;" placeholder="Cliente" />
            </div>
            <div class="form-group">
                <label class="control-label" for="payTbx" style="font-size:20px">Pago:</label>
                <input type="number" id="payTbx" name="pay" class="form-control" style="width:230px;" placeholder="Pago" />
            </div>
            <div class="form-group" style="font-size:30px">
                <label class="control-label">Total:</label>
                <span class="form-control-static" id="totalPrice" name="totalPrice"></span>
            </div>
        </div>
        <div id="actionButtonsContanier" class="col-md-7" style="margin:5px 0 0 10px;">
            <!--<div class="form-inline" style="margin:0 0 0 10px;">-->
            <div class="form-group" style="float:left;margin:0 0 10px 5px;">
                <button id="billBtn" class="btn btn-success btn-big">
                    <i class="fa fa-money"></i>
                    <span>Facturar</span>
                </button>
            </div>
            <div class="form-group" style="float:left;margin:0 0 10px 5px;">
                <button id="newBtn" class="btn btn-success btn-big">
                    <i class="fa fa-file-o"></i>
                    <span>Nueva</span>
                </button>
            </div>
            <div class="form-group" style="float:left;margin:0 0 10px 5px;">
                <button id="printBtn" class="btn btn-info btn-big">
                    <i class="fa fa-print"></i>
                    <span>Imprimir</span>
                </button>
            </div>
            <div class="form-group" style="float:left;margin:0 0 10px 5px;">
                <button id="cleanBtn" class="btn btn-danger btn-big">
                    <i class="fa fa-trash-o"></i>
                    <span>Limpiar</span>
                </button>
            </div>
            <!--</div>-->
        </div>
    </div>
    <div class="col-md-7">
        <div class="container-fluid">
            <h3 class="pull-left no-margin">Últimas Facturas</h3>
            <div class="pull-left">
                <a style="position:absolute;bottom:0;height:auto;display:none;">Ver todas</a>
            </div>
            
        </div>
        <div id="billingHistory" class="row" style="margin:3px 0 0 0;padding:0;"></div>
    </div>
</div>